<template>
  <div>
    <div class="container mini-layout cs-main-box" id="flowdesign_canvas"></div>
    <div
      id="trackinfo"
      style="
        display: none;
        position: absolute;
        width: 260px;
        height: auto;
        background-color: #fff;
      "
    >
      <table
        id="tracktable"
        class="Table"
        cellpadding="0"
        cellspacing="0"
        border="1"
        style="width: 100%"
      ></table>
    </div>
  </div>
</template>

<script>
var jdata;
var rFlow;
var isSubFlowNode;

//定义样式变量，可在此统一修改流程样式  used
var STYLE_CURRENT_NODE_COLOR_FORE = "Red"; //当前节点字体名称颜色
var STYLE_CURRENT_NODE_BORDER_COLOR = "red"; //当前节点边框

var STYLE_CANVAS_COLOR = "#FFFFFF"; //画布背景颜色,E7F1F9
var STYLE_FONT_SIZE_NODE = 12; //节点名称字体大小

var STYLE_NODE_WIDTH = 50; //节点宽度
var STYLE_NODE_HEIGHT = 50; //节点高度
var STYLE_NODE_COLOR_FORE = "Gray"; //节点名称颜色

var STYLE_NODE_COLOR_FORE_TRACK = "green"; //走过的节点名称颜色
var STYLE_NODE_DEFAULT_ICON_PATH = "../../../DataUser/NodeIcon/"; //默认节点图标所在相对路径
var STYLE_NODE_DEFAULT_ICON = "Default.jpg"; //默认节点图标文件名称
var STYLE_NODE_BORDER_COLOR_FIRST = "green"; //开始节点边框颜色
var STYLE_NODE_BORDER_COLOR_END = "green"; //结束节点边框颜色

var STYLE_NODE_BORDER_COLOR_TRACK = "green"; //走过的节点边框颜色
var STYLE_NODE_BORDER_COLOR = "black"; //节点边框颜色

var STYLE_NODE_BORDER_WIDTH_NORMAL = 1; //节点边框宽度

var STYLE_LINE_COLOR = "Gray"; //连线颜色
var STYLE_LINE_TRACK_COLOR = "green"; //走过的连线颜色
var STYLE_NODE_TRACK_FORE_COLOR = "green"; //走过的节点轨迹信息字体颜色
var DATA_USER_ICON_PATH = "../../../DataUser/UserIcon/"; //用户头像文件相对目录
var DATA_USER_ICON_DEFAULT = "Default.png"; //默认用户头像文件名称
var DATA_MULTI_USER_ICON_DEFAULT = "../../Img/Multiplayer.png"; //多用户头像文件相对路径

var fk_Flow;
var workID;
var fid;
var gwf;
var nodeIsPass = {};

import { HttpHandler, Entity, getConfigByKey } from "@/api/Gener.js";
import { GetQueryString } from "@/api/QueryString";
import {
  getMaxInArray,
  getTracksByFromNode,
  getTrackForCurrNode,
  getFillTextColor,
  checkUrl,
  GetSpanTime,
  GetOverSpanTime,
  getGenerWorkerListByNodeID,
  getChineseDateTime,
} from "../../jsplumb/utils/NodeUtils.js";
import RNode from "../../jsplumb/entity/RNode";
import RFlow from "../../jsplumb/entity/RFlow";
import $ from "jquery";
import jslumb from 'jsplumb'
const Hide_IsRead = getConfigByKey("Hide_IsRead", true); //是否隐藏该条信息,CommonShowConfig.js中定义
export default {
  methods: {
    ///开始绘制.
    DrawStart(datas) {
      $("#holder").css("background-color", STYLE_CANVAS_COLOR);
      var height = $(document).height();
      if (height < 600) {
        height = 600;
      }
      var rNode;
      rFlow = new RFlow(fk_Flow);
      //绘制节点
      var nodeBorderColor = STYLE_NODE_BORDER_COLOR;
      var startNodePosType = 0;
      var endNodePosType = getMaxInArray(datas.WF_Node, "NodePosType");
      var nodeTracks;
      var nodeTrack;
      var isExist;
      var currNode = parseInt(GetQueryString("FK_Node"));
      var flowInfo = datas.FlowInfo[0];
      var gwls = jdata.WF_GenerWorkerList;

      $("#tracktable").hover(
        function () {},
        function () {
          $("#trackinfo").offset({ top: 0, left: 0 });
          $("#trackinfo").hide();
        }
      );
      //1.移除所有默认的图标
      $(".process-step .process-flag").remove();
      $.each(datas.WF_Node, function () {
        //确定边框颜色
        switch (this.NODEPOSTYPE) {
          case startNodePosType:
            nodeBorderColor = STYLE_NODE_BORDER_COLOR_FIRST;
            break;
          case endNodePosType:
            nodeBorderColor = STYLE_NODE_BORDER_COLOR_END;
            break;
          default:
            nodeBorderColor = STYLE_NODE_BORDER_COLOR;
            break;
        }
        //检测轨迹数据，如果有，则将该节点图标换成处理人头像，人名绘制于节点图标的右侧.
        nodeTracks = getTracksByFromNode(datas.Track, this.ID);
        if (nodeTracks.length > 0) {
          nodeTrack = getTrackForCurrNode(nodeTracks);
        } else {
          nodeTrack = null;
        }
        //确定节点图标
        if (nodeTrack != null) {
          this.ICON =
            DATA_USER_ICON_PATH +
            (nodeTrack.type == "FROM"
              ? nodeTrack.track.EmpFrom
              : nodeTrack.track.EmpTo) +
            ".png";

          isExist = checkUrl(encodeURI(this.ICON));
          if (isExist == false) {
            this.ICON = DATA_USER_ICON_PATH + DATA_USER_ICON_DEFAULT;
          }
        } else {
          if (this.ICON == null || this.ICON.length == 0) {
            this.ICON = STYLE_NODE_DEFAULT_ICON_PATH + STYLE_NODE_DEFAULT_ICON;
          } else {
            if (this.ICON.indexOf(".") == -1) {
              this.ICON = STYLE_NODE_DEFAULT_ICON_PATH + this.ICON + ".png";
            } else {
              this.ICON =
                STYLE_NODE_DEFAULT_ICON_PATH +
                this.ICON.substr(this.ICON.lastIndexOf("/") + 1);
            }

            isExist = checkUrl(encodeURI(this.ICON));
            if (isExist == false) {
              this.ICON =
                STYLE_NODE_DEFAULT_ICON_PATH + STYLE_NODE_DEFAULT_ICON;
            }
          }
        }
        //开始绘制
        rNode = new RNode(
          this.ID,
          this.Name,
          this.X - STYLE_NODE_WIDTH / 2,
          this.Y - STYLE_NODE_HEIGHT / 2
        );
        rNode.isTrackNode = nodeTrack != null;
        rNode.tracks = nodeTracks;
        rNode.currTrack = nodeTrack;
        if (flowInfo.WFState == 3 && this.ID == currNode)
          rNode.IsEndNode = true;
        else rNode.IsEndNode = false;

        var borderColor = nodeBorderColor;
        var TextColor = STYLE_NODE_COLOR_FORE;
        //根据当前节点获取上一节点信息
        var beforTrack = null;
        //流程未结束
        if (gwf.WFState == 3) {
          TextColor = STYLE_NODE_COLOR_FORE_TRACK;
          borderColor = STYLE_NODE_BORDER_COLOR_TRACK;
        } else {
          //显示当前节点的状态
          var isPass = getGenerWorkerListByNodeID(this.ID, gwls);
          if (isPass == 0) {
            borderColor = STYLE_CURRENT_NODE_BORDER_COLOR;
            TextColor = STYLE_CURRENT_NODE_COLOR_FORE;
          }
          if (isPass == 1) {
            borderColor = STYLE_NODE_COLOR_FORE_TRACK;
            TextColor = STYLE_NODE_BORDER_COLOR_TRACK;
          }
        }
        //在节点右侧绘制流程轨迹中当前节点的处理人/处理时间
        if (rNode.isTrackNode) {
          //判断此节点是否是多人处理 //是根据他上一节点的track来决定的
          if (
            beforTrack != null &&
            beforTrack.EmpToT.indexOf("多人接受") > -1
          ) {
            this.ICON = DATA_MULTI_USER_ICON_DEFAULT;
            rNode.rIcon.attr("src", this.ICON);
          }
          //
          var $node = $("#window" + this.ID);
          var nodePos = $node.position();
          var nodeTop = nodePos.top;
          var nodeLeft = nodePos.left;
          var nodeWidth = $("#window" + this.ID).width();
          var nodeHeight = $("#window" + this.ID).height();

          var trackLabLeft = nodeLeft + nodeWidth + 22;
          var trackLabTop = nodeTop + nodeHeight / 2 - 20;
          var trackLabHtml =
            rNode.currTrack.type == "FROM"
              ? rNode.currTrack.track.EmpFromT +
                "</br>" +
                getChineseDateTime(rNode.currTrack.track.RDT)
              : rNode.currTrack.track.EmpToT;

          $("#window" + this.ID).after(
            '<text text-anchor="start"  font="10px &quot;Arial&quot;" stroke="#008000" fill="#008000" style="color:' +
              getFillTextColor(TextColor) +
              ";left:" +
              trackLabLeft +
              "px;top:" +
              trackLabTop +
              "px; " +
              'position: absolute;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font: 14px Arial;" font-size="14px">' +
              trackLabHtml +
              "</text>"
          );
        }
        var sId = "#window" + this.ID;
        $(sId).css({ border: "1px solid " + borderColor });
        $(sId + " span").css({
          color: getFillTextColor(TextColor),
          "font-size": STYLE_FONT_SIZE_NODE,
        });
        //禁止节点拖动
        $(sId).draggable("disable").removeClass("ui-state-disabled");
        //增加节点图片的鼠标滑过/移开效果
        $(sId).hover(
          function () {
            $("#tracktable").empty();
            var node = rFlow.getNode(this.id.replace("window", ""));
            var Tracks = jdata.Track;
            //审核组件信息.
            var fwc = jdata.FrmWorkCheck;

            if (node != null) {
              //node.rBorder.attr({ "stroke": STYLE_NODE_BORDER_COLOR_HOVER, "stroke-width": STYLE_NODE_BORDER_WIDTH_HOVER });
              //node.rText.attr({ "stroke": STYLE_NODE_COLOR_FORE_HOVER, "fill": getFillTextColor(STYLE_NODE_COLOR_FORE_HOVER) });
              var trackType = 0;
              if (node.currTrack != undefined)
                trackType = node.currTrack.track.ActionType;

              var tablehtml = "";

              //增加到达时间,应完成时间.
              var generWorkerLists = jdata.WF_GenerWorkerList;

              if (generWorkerLists != null) {
                for (var i = 0; i < generWorkerLists.length; i++) {
                  var gwl = generWorkerLists[i];
                  if (gwl.FK_Node != node.id) continue;
                  if (gwl.IsPass == -2) continue;

                  var rdt = gwl.RDT;
                  if (rdt != "" && rdt != "无")
                    rdt = new Date(
                      Date.parse(gwl.RDT.replace(/-/g, "/"))
                    ).format("yyyy-MM-dd hh:mm:ss");

                  var sdt = gwl.SDT;
                  if (sdt != "" && sdt != "无")
                    sdt = new Date(
                      Date.parse(gwl.SDT.replace(/-/g, "/"))
                    ).format("yyyy-MM-dd hh:mm:ss");

                  var cdt = gwl.CDT;
                  if (cdt != "" && cdt != "无")
                    cdt = new Date(
                      Date.parse(gwl.CDT.replace(/-/g, "/"))
                    ).format("yyyy-MM-dd hh:mm:ss");

                  tablehtml += "<table style='width:300px;'>";
                  tablehtml += "<caption>" + gwl.FK_EmpText + "</capiton>";
                  tablehtml += "<tr style='background-color:InfoBackground' >";
                  tablehtml += "<td>任务下达日期</td>";
                  tablehtml += "<td>" + rdt + "</td>";
                  tablehtml += "</tr>";

                  tablehtml += "<tr style='background-color:InfoBackground' >";
                  tablehtml += "<td>应完成日期</td>";
                  tablehtml += "<td>" + sdt + "</td>";
                  tablehtml += "</tr>";
                  rdt = rdt.replace(/-/g, "/");
                  rdt = new Date(Date.parse(rdt.replace(/-/g, "/")));
                  if (sdt != "无") {
                    sdt = sdt.replace(/-/g, "/");
                    sdt = new Date(Date.parse(sdt.replace(/-/g, "/")));
                  }

                  tablehtml += "<tr style='background-color:InfoBackground' >";
                  if (gwl.IsPass == 0) {
                    tablehtml += "<td>还剩余</td>";
                    if (sdt == "无") tablehtml += "<td> ------</td>";
                    else
                      tablehtml +=
                        "<td> " + GetOverSpanTime(rdt, sdt) + "</td>";
                  } else if (gwl.IsPass == 1) {
                    tablehtml += "<td>实际完成</td>";
                    tablehtml += "<td> " + cdt + "</td>";
                  } else {
                    //队列模式
                    if (trackType == 27 && gwl.IsPass > 1) {
                      tablehtml += "<td>是否有待办</td>";
                      tablehtml += "<td> 无</td>";
                    }
                  }
                  tablehtml += "</tr>";

                  var cdt = cdt.replace(/-/g, "/");
                  cdt = new Date(Date.parse(cdt.replace(/-/g, "/")));

                  tablehtml += "<tr style='background-color:InfoBackground' >";
                  if (gwl.IsPass == 1) {
                    tablehtml += "<td>用时</td>";
                    tablehtml += "<td> " + GetSpanTime(rdt, cdt) + "</td>";
                  }
                  tablehtml += "</tr>";

                  if (gwl.IsPass == 0 && Hide_IsRead == true) {
                    tablehtml +=
                      "<tr style='background-color:InfoBackground' >";
                    tablehtml += "<td>是否打开？</td>";

                    if (gwl.IsRead == 1) tablehtml += "<td>是</td>";
                    else tablehtml += "<td><font color=red>否</font></td>";
                    tablehtml += "</tr>";
                  }

                  tablehtml += "<tr style='background-color:InfoBackground' >";
                  tablehtml += "<td>发送人</td>";
                  var sender = gwl.Sender;
                  if (sender == "" || sender == undefined) sender = "无";

                  tablehtml += "<td>" + sender + "</td>";
                  tablehtml += "</tr>";
                }

                tablehtml += "</table>";

                //组织节点的轨迹信息
                var p = $("#" + this.id).offset();
                $("#tracktable").append(tablehtml);
                $("#trackinfo").offset({ top: p.top + 20 - 2, left: p.left });
                $("#trackinfo").show();
                return;
              }

              //重track里面获取数据.

              //获得上一个节点发送的日志.

              Tracks = jdata.Track;
              var NDTo = "";
              var IsExist = false;

              for (let i = 0; i < Tracks.length; i++) {
                var track = Tracks[i];
                if (track.ActionType == ActionType.FlowBBS) continue;
                if (track.ActionType == ActionType.WorkCheck) continue;
                if (track.ActionType == ActionType.FlowOver) continue;

                if (
                  track.ActionType == ActionType.ForwardFL &&
                  track.EmpToT.indexOf("多人接受") == -1
                )
                  continue;

                var nodeId = node.id;

                if (track.NDTo == nodeId && track.FID != 0) continue;
                if (
                  track.NDTo == nodeId &&
                  track.EmpToT.indexOf("多人接受") != -1
                )
                  continue;

                //不是多人接受，并且EmpTo不相同。
                if (track.EmpToT.indexOf("多人接受") == -1) {
                  if (track.EmpTo != node.currTrack.track.EmpTo) continue;
                  else if (IsExist == true) continue;
                }

                if (track.NDFrom == nodeId || track.NDTo == nodeId) {
                  NDTo = track.NDTo;

                  var trackhtml = "<table style='width:300px;'>";
                  if (track.NDFrom == nodeId)
                    trackhtml += "<caption> " + track.EmpFromT + " </capiton>";
                  if (track.NDTo == nodeId && track.NDFrom != nodeId)
                    trackhtml += "<caption> " + track.EmpToT + " </capiton>";
                  trackhtml += "<tr style='background-color:InfoBackground' >";
                  if (lastTwoBit == "01") trackhtml += "<td>任务启动日期</td>";
                  else trackhtml += "<td>任务下达日期</td>";
                  var dtto = "";
                  //最后流程
                  if (lastTwoBit == "01") {
                    dtto = track.RDT;
                  } else {
                    for (var k = 0; k < Tracks.length; k++) {
                      var track1 = Tracks[k];
                      if (track1.NDTo == node.id && track1.RDT <= track.RDT) {
                        dtto = track1.RDT;
                        break;
                      }
                    }
                  }

                  trackhtml += "<td>" + dtto + "</td>";
                  trackhtml += "</tr>";

                  dtto = dtto.replace(/-/g, "/");
                  dtto = new Date(Date.parse(dtto.replace(/-/g, "/")));

                  //判断是否有考核时间
                  var mypk =
                    node.id +
                    "_" +
                    uh["WorkID"] +
                    "_" +
                    track.FID +
                    "_" +
                    track.EmpFrom;
                  var chext = new Entity("BP.WF.Data.CH");
                  chext.SetPKVal(mypk);
                  var count = chext.RetrieveFromDBSources();
                  var SDT = "无";
                  if (count == 1 && lastTwoBit != "01") SDT = chext.SDT;
                  trackhtml += "<tr style='background-color:InfoBackground' >";
                  trackhtml += "<td>应完成日期</td>";
                  trackhtml += "<td>" + SDT + "</td>";

                  trackhtml += "</tr>";

                  var rdt = track.RDT.replace(/-/g, "/");
                  rdt = new Date(Date.parse(rdt.replace(/-/g, "/")));

                  trackhtml += "<tr style='background-color:InfoBackground' >";
                  trackhtml += "<td>实际完成</td>";

                  if (track.NDFrom == node.id)
                    trackhtml += "<td id='cdt'> " + track.RDT + "</td>";
                  else if (track.NDTo == node.id && node.IsEndNode == true) {
                    //获取节点的track
                    var endTrack = Tracks[i - 1];
                    trackhtml += "<td id='cdt'> " + endTrack.RDT + "</td>";
                    rdt = new Date(Date.parse(endTrack.RDT.replace(/-/g, "/")));
                  } else continue;

                  trackhtml += "</tr>";

                  trackhtml += "<tr style='background-color:InfoBackground' >";
                  trackhtml += "<td>用时</td>";
                  trackhtml += "<td> " + GetSpanTime(dtto, rdt) + "</td>";

                  trackhtml += "</tr>";
                  trackhtml += "<tr style='background-color:InfoBackground' >";
                  trackhtml += "<td>发送人</td>";
                  if (lastTwoBit == "01") trackhtml += "<td></td>";
                  else {
                    for (let k = 0; k < Tracks.length; k++) {
                      var track1 = Tracks[k];
                      if (track1.ActionType == ActionType.FlowBBS) continue;
                      if (track1.ActionType == ActionType.WorkCheck) continue;
                      if (track1.ActionType == ActionType.FlowOver) continue;
                      if (track1.NDTo == node.id) {
                        trackhtml +=
                          "<td>" +
                          track1.EmpFrom +
                          "," +
                          track1.EmpFromT +
                          "</td>";
                        break;
                      }
                    }
                  }
                  IsExist = true;
                  trackhtml += "</tr></table>";
                  tablehtml += trackhtml;
                }
              }

              tablehtml += "</table>";

              //组织节点的轨迹信息
              var p = $(this.node).offset();
              $("#tracktable").append(tablehtml);
              $("#trackinfo").offset({
                top: p.top + this.attr("height") - 2,
                left: p.left,
              });
              $("#trackinfo").show();
            }
          },
          function () {
            var node = rFlow.getNodeByRIconId(this.id);

            if (node != null) {
              var borderColor = nodeBorderColor;
              var TextColor = STYLE_NODE_COLOR_FORE;
              //流程未结束
              if (gwf.WFState == 3) {
                TextColor = STYLE_NODE_COLOR_FORE_TRACK;
                borderColor = STYLE_NODE_BORDER_COLOR_TRACK;
              } else {
                //显示当前节点的状态
                var isPass = nodeIsPass[node.id][0];
                if (isPass == 0) {
                  borderColor = STYLE_CURRENT_NODE_BORDER_COLOR;
                  TextColor = STYLE_CURRENT_NODE_COLOR_FORE;
                }
                if (isPass == 1) {
                  borderColor = STYLE_NODE_COLOR_FORE_TRACK;
                  TextColor = STYLE_NODE_BORDER_COLOR_TRACK;
                }
              }

              node.rBorder.attr({
                stroke: borderColor,
                "stroke-width": STYLE_NODE_BORDER_WIDTH_NORMAL,
              });
              node.rText.attr({
                stroke: TextColor,
                fill: getFillTextColor(TextColor),
              });
              if (node.rTrackText != null) {
                node.rTrackText.attr({
                  stroke: TextColor,
                  fill: getFillTextColor(STYLE_NODE_TRACK_FORE_COLOR),
                });
                node.rTrackText.attr({
                  stroke: TextColor,
                  fill: getFillTextColor(TextColor),
                });
              }

              if (isSubFlowNode == false) {
                $("#trackinfo").offset({ top: 0, left: 0 });
                $("#trackinfo").hide();
              }
            }
          }
        );
        //加入到流程节点.
        rFlow.nodes.push(rNode);
      });

      //线
      $.each(jsPlumb.getConnections(), function (idx, connection) {
        var ndFrom = this.sourceId.replace("window", "");
        var ndTo = this.targetId.replace("window", "");
        var lineColor =
          datas.Track.findBy2Field("NDFrom", ndFrom, "NDTo", ndTo) != null
            ? STYLE_LINE_TRACK_COLOR
            : STYLE_LINE_COLOR;

        //设置有轨迹数据的线的颜色
        var style = {
          lineWidth: 3,
          strokeStyle: lineColor,
          fillStyle: lineColor,
        };
        connection.setPaintStyle(style, false);
        //加上鼠标hover线上的颜色
        style = { lineWidth: 3, strokeStyle: "blue", fillStyle: "blue" };
        this.setHoverPaintStyle(style, false);
      });

      //标签
      $.each(datas.WF_LabNote, function () {
        var labId = "#lab" + this.MyPK;
        $(labId).draggable("disable").removeClass("ui-state-disabled");
      });
    },
  },
  created() {
    //挂载格式化到Date对象
    Date.prototype.format = function (format) {
      var date = {
        "M+": this.getMonth() + 1,
        "d+": this.getDate(),
        "h+": this.getHours(),
        "m+": this.getMinutes(),
        "s+": this.getSeconds(),
        "q+": Math.floor((this.getMonth() + 3) / 3),
        "S+": this.getMilliseconds(),
      };
      if (/(y+)/i.test(format)) {
        format = format.replace(
          RegExp.$1,
          (this.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (var k in date) {
        if (new RegExp("(" + k + ")").test(format)) {
          format = format.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? date[k]
              : ("00" + date[k]).substr(("" + date[k]).length)
          );
        }
      }
      return format;
    };
  },
  mounted() {
    //解除节点双击事件
    $(".process-step").die(); //("dblclick");
    fk_Flow = GetQueryString("FK_Flow"); // uh["FK_Flow"];
    workID = GetQueryString("WorkID"); // uh["FK_Flow"];
    fid = GetQueryString("FID"); // uh["FK_Flow"];
    if (!workID || workID == "null") {
      workID = "0";
    }
    if (!fid || fid == "null") {
      fid = "0";
    }
    gwf = new Entity("BP.WF.GenerWorkFlow", workID);
    var Token = GetQueryString("Token"); // uh["FK_Flow"];
    var handler = new HttpHandler("BP.WF.HttpHandler.WF_WorkOpt_OneWork");
    handler.AddPara("FK_Flow", fk_Flow);
    handler.AddPara("WorkID", workID);
    handler.AddPara("FID", fid);
    if (Token != null && Token != undefined && Token != "") {
      handler.AddPara("Token", Token);
    }
    var data = handler.DoMethodReturnString("Chart_Init");
    if (typeof data === "string") {
      if (data.indexOf("err@") == 0) {
        alert(data);
        return;
      }
      jdata = JSON.parse(data);
    }
    this.DrawStart(jdata); //执行绘制信息.
  },
};
</script>

<style scoped>
li {
  list-style: none;
}

#nodeMenu li {
  padding: 0px 0px 1px 5px;
}

#nodeMenu li:hover {
  background-color: #2980b9;
  cursor: pointer;
}
/****给弹出框URL写的样式*/
.ui-icon-closethick {
  background-position: 0;
}

#fwcMenu li:hover {
  background-color: #2980b9;
  cursor: pointer;
}

.ui-widget-header .ui-icon {
  top: 30% !important;
}

.ui-dialog .ui-dialog-titlebar-close {
  background-repeat: no-repeat;
  background-position: 1px;
}
</style>